<script lang="ts" setup>
import { Book, BookDetails, Page } from '@/model';

const props = defineProps<{
  // 是否打开弹出层
  visible: boolean;
  // 当前被点击的行，用作编辑，或新增
  currentRow: Book;
}>();

const emits = defineEmits(['closeDialog']);

const dialogHeight = ref<string>('');

/**
 * 关闭弹窗，更新默认值
 */
const onClose = () => {
  emits('closeDialog', false, undefined);
};

/**
 * 计算滚动条高度
 */
const calcScrollbarHeight = () => {
  dialogHeight.value = `${window.innerHeight * 0.5}px`;
};

/**
 * 当弹出层被打开时触发
 */
const onOpen = () => {
  calcScrollbarHeight();
};

/**
 * 动态计算表格高度
 */
const tableHeight = computed(() => {
  return window.innerHeight * 0.5 - 164;
});

// 表格分页数据
const tableData = ref<Page<BookDetails>>({
  records: [] as BookDetails[],
  current: 0,
  pages: 0,
  size: 0,
  total: 0,
});

/**
 * 手动新增人亲列表
 */
const onCreate = () => {};
</script>

<template>
  <el-dialog
    :model-value="visible"
    :show-close="false"
    @closed="onClose"
    width="60%"
    @open="onOpen"
    :close-on-click-modal="false"
  >
    <template #header>
      <div class="form-header">
        <span class="title">礼簿详情</span>
        <div>
          <el-tooltip content="关闭" placement="top" effect="light" :show-after="500">
            <el-button class="btn-cancel" circle @click.stop="onClose()">
              <el-icon>
                <i-ep-close />
              </el-icon>
            </el-button>
          </el-tooltip>
        </div>
      </div>
    </template>
    <el-scrollbar :height="dialogHeight" ref="scrollbarRef">
      <el-descriptions>
        <el-descriptions-item label="礼簿名称">{{
          currentRow.bookName
        }}</el-descriptions-item>
        <el-descriptions-item label="礼簿编码">{{
          currentRow.bookCode
        }}</el-descriptions-item>
        <el-descriptions-item label="收礼日期">{{
          currentRow.receiptDate
        }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{
          currentRow.remark
        }}</el-descriptions-item>
      </el-descriptions>
      <!--人亲簿子-->
      <!--功能栏-->
      <div class="function-container details-list">
        <span class="title"></span>
        <el-tooltip content="新增礼簿" placement="top" effect="light" :show-after="500">
          <el-button class="btn-create" circle @click="onCreate()">
            <el-icon>
              <i-ep-plus />
            </el-icon>
          </el-button>
        </el-tooltip>
        <el-tooltip content="导入人亲" placement="top" effect="light" :show-after="500">
          <el-button class="btn-import" circle @click="onCreate()">
            <el-icon>
              <i-ep-plus />
            </el-icon>
          </el-button>
        </el-tooltip>
        <el-tooltip content="下载模板" placement="top" effect="light" :show-after="500">
          <el-button class="btn-export" circle @click="onCreate()">
            <el-icon>
              <i-ep-plus />
            </el-icon>
          </el-button>
        </el-tooltip>
      </div>
      <!--数据栏-->
      <div class="data-container">
        <el-table :data="tableData.records" :height="tableHeight">
          <el-table-column type="index" width="55" label="序号" />
          <el-table-column prop="giverName" label="姓名" />
          <el-table-column prop="cashLimit" label="礼金" />
          <el-table-column
            prop="remark"
            label="备注"
            min-width="160"
            :show-overflow-tooltip="true"
          />
        </el-table>
        <el-pagination
          :background="true"
          v-model:current-page="tableData.current"
          v-model:page-size="tableData.size"
          :total="tableData.total"
          :page-count="tableData.pages"
          :pager-count="5"
          layout="prev, pager, next"
          class="table-pagination"
        >
        </el-pagination>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<style scoped lang="scss">
.details-list {
  margin-top: 40px;
}
</style>
